<template>
    <!-- 知识图谱 -->
  <div class="knowledgeGraph">
      <div class = "sort">
        <el-form :inline="true" class="form-inline">
            <el-form-item label="">
            <el-select v-model="gradeId" placeholder="请选择系" @change="getMajor">
                <el-option v-for="item in gradeList" :key="item.labelId" :label="item.label" :value="item.labelId"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="">
            <el-select v-model="majorId" placeholder="请选择专业" @change="getNodeData">
                <el-option v-for="item in majorList" :key="item.labelId" :label="item.label" :value="item.labelId"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
      </div>
      <div id="knowCon" class = "knowCon"></div>
  </div>
</template>

<script>
import { _getNodeData } from '../../network/dissertation.js'
import { _getGrade, _getMajor } from '../../network/common.js'

export default {
  name: 'KnowledgeGraph',
  data () {
    return {
        nodeData: [],
        linkData: [],
        gradeList: [],
        majorList: [],
        gradeId: '',
        majorId: ''
    }
  },
  mounted () {
    /* 获取系类别信息 */
    _getGrade().then(res => {
      if(res.data.code === 200){
        this.gradeList = res.data.gradeList
        this.gradeId = this.gradeList[0].labelId
        this.getMajor()
        this.majorId = 11
        this.getNodeData()
      } else {
        switch(res.headers.flag){
          case '-1':
            this.$message.error('请先登录')
            this.$router.push('/login')
            break
          case '-2':
            localStorage.removeItem('token')
            this.$message.error('token错误或已失效，请重新登录')
            this.$router.push('/login')
            break
          default:
            this.$message.error('系别获取数据失败')
            break;
        }
      }
    }).catch(res => {
      this.$message.error("未知错误，请联系管理员")
    })
  },
  methods: {
      /* 获取节点和关系数据 */
      getNodeData () {
          _getNodeData(this.majorId).then(res => {
              if(res.data.code == 200){
                  this.nodeData = res.data.nodeList
                  this.linkData = res.data.linkList
                  this.initKnowledgeGraph()
              } else {
                  this.$message.error('获取数据失败')
              }
          }).catch(res => {
              this.$message.error('未知错误，请联系管理员')
          })
      },
      initKnowledgeGraph () {
        var myChart = this.$echarts.init(document.getElementById('knowCon'));
        var categories = [];
        for (var i = 0; i < 2; i++) {
            categories[i] = {
                name: '类目' + i
            };
        }
        var option = {
            // 提示框的配置
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },
            // 工具箱
            toolbox: {
                // 显示工具箱
                show: true,
                feature: {
                    mark: {
                        show: true
                    },
                    // // 还原
                    // restore: {
                    //     show: true
                    // },
                    // // 保存为图片
                    // saveAsImage: {
                    //     show: true
                    // }
                }
            },
            legend: [{
                // selectedMode: 'single',
                data: categories.map(function (a) {
                    return a.name;
                })
            }],
            series: [{
                type: 'graph', // 类型:关系图
                layout: 'force', //图的布局，类型为力导图
                symbolSize: 40, // 调整节点的大小
                roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [2, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                },
                draggable: true,
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#4b565b',
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {}
                    }
                },
                // 数据
                data: this.nodeData,
                links: this.linkData,
                categories: categories,
            }]
        };
        myChart.setOption(option);
      },
      /* 获取专业 */
        getMajor () {
            let gradeId = parseInt(this.gradeId)
            _getMajor(gradeId).then(res => {
                if(res.data.code === 200){
                    this.majorList = res.data.majorList
                } else {
                    this.$message.error('获取专业数据失败')
                }
            }).catch(res => {
                this.$message.error("未知错误，请联系管理员")
            })
        }
  }
}
</script>


<style>
.sort .form-inline .el-input__inner{
    width: 120px;
    height: 33px;
    line-height: 33px;
    margin: 0;
}
.sort .form-inline .el-form-item{
    margin-bottom: 0;
}
</style>
<style scoped>
.knowledgeGraph{
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 40px;
}
.knowledgeGraph .knowCon{
    width: 100%;
    height: 100%;
}
.sort{
  position: absolute;
  top: 0;
  width: 100%;
  text-align: left;
  padding-left: 20px;
  border-bottom: 1px solid #ccc;
}
</style>
